<template>
	<view style="background-color: ;height: ">
		<!-- 导航栏 -->
		<view>
			<uni-nav-bar title="订单编号" :border="true" :fixed="true" background-color="rgba(0, 0, 0, 0)"
				:statusBar="true">
			</uni-nav-bar>
		</view>
		<view style="background-color: ;">
			<view style="transform: scale(0.95);">
				<view>
					<text style="color: #474F65;font-weight: 800;">订单编号 {{workDetail.order_id}}</text>
				</view>
				<view style="margin-top: 10px;">
					<text style="color: #474F65;font-weight: 800;">任务名称 {{workDetail.title}}</text>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 15px;">
					<text style="color: #B1B4B8;font-size: 14px;">奖励方式</text>
					<text style="color: red;"><text style="font-size: 28px;font-weight: 700;">{{workDetail.money}}
						</text>金币</text>
				</view>
				<u-line :hairline="false" style="margin-top: 20px;transform: ;"></u-line>
				<!-- 任务时间 -->
				<view style="margin-top: 10px;">
					<text style="color: #B1B4B8;">开始时间&nbsp;&nbsp;&nbsp;&nbsp;{{workDetail.data_statr}}</text>
				</view>
				<view style="margin-top: 10px;">
					<text style="color: #B1B4B8;">结束时间&nbsp;&nbsp;&nbsp;&nbsp;{{workDetail.data_end}}</text>
				</view>
				<u-line :hairline="false" style="margin-top: 20px;transform: ;"></u-line>
				<!-- 任务详情 -->
				<view>
					<text style="font-weight: 800;">任务详情</text>
					<view style="margin-top: 20px;">
						<text style="line-height: 30px;color: #B1B4B8;">
							{{workDetail.content}}
						</text>
					</view>
				</view>
				<view style="margin-top: 40px;">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10">
						<image src="http://qiniu.gaowa.love/65d5a8897f7a41708501129.png" mode="widthFix"
							style="width: 150px;height: 150px;"></image>
					</u-upload>
				</view>
				<view style="color: #B1B4B8;">点击我上传图片</view>
			</view>
		</view>
		<u-tabbar :value="value1" @change="change1" :fixed="true" :placeholder="false" :safeAreaInsetBottom="false"
			style="display: flex; justify-content: flex-start;">
			<u-tabbar-item @click="click1">
				<template #text>
					<view><text style="color: red;font-weight: 600;">{{workDetail.money}} </text><text
							style="color: red;font-size: 12px;">呜噜币</text></view>
					<view><text style="font-size: 12px;">呜噜币数量</text></view>
				</template>
			</u-tabbar-item>
			<u-tabbar-item @click="click1">
				<template #text>
					<view style="width: 200px;"><u-button text="提交任务" color="#FE4D53" shape="circle"
							@click="subTask"></u-button></view>
				</template>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		finishWork
	} from "../../request/API/finishWork.js";
	import {
		workDetail
	} from "../../request/API/workDetail.js";
	export default {
		data() {
			return {
				fileList1: [],
				tempfile: [],
				workDetail: [],
				order_id: '',
				work_id: ''
			}
		},
		onLoad(options) {
			this.order_id = options.order_id;
			this.work_id = options.id;
			const work_id = this.work_id
			console.log(work_id)
			const order_id = this.order_id
			workDetail({
					work_id
				})
				.then(data => {
					this.workDetail = data.data
					console.log(data)
				})
				.catch(Error => {

				})
			console.log(this.order_id)
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				const token = uni.getStorageSync('token');
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://uni.gaowa.love/api/work/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							Authorization: token['token'] // 在请求头中添加 token
						},
						success: (res) => {
							// console.log(res);
							let dataObj = JSON.parse(res.data);
							// 提取 JSON 对象中的 URL 地址部分
							this.tempfile.push(dataObj.data);
							console.log(dataObj.data);
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			subTask() {
				// console.log(this.tempfile)
				let tempfileJSON = JSON.stringify(this.tempfile);
				console.log(tempfileJSON);

				const id = this.order_id
				const img = tempfileJSON
				// console.log(id)
				// const Data = {
				// 	id : orderId,
				// 	img: tempfileJSON,
				// };
				finishWork({
						id,
						img
					})
					.then(data => {
						console.log(data)
						uni.showToast({
							title: data.msg,
							icon: 'none',
						});
						uni.reLaunch({
							url: '/pages/task/task' // 重定向到首页，刷新页面
						});
					})
					.catch(error => {
						uni.showToast({
							title: error.msg,
							icon: 'none',
						});
					})
			}

		}
	}
</script>

<style>
</style>